<template>
  <div class="main-box scroll">
    <div class="overview-wrap table-box">
      <div class="framework-search top-box">
        <!--        <el-alert type="info" show-icon closable style="margin-bottom: 20px">-->
        <!--          <template #message>-->
        <!--            <p style="margin: 0">云平台的对接操作请在<a href="/cloudenv_manage/#/cloud_config">云管理-云资源池</a>中进行</p>-->
        <!--          </template>-->
        <!--        </el-alert>-->
        <el-alert type="success" style="margin-bottom: 20px">
          <template #title>
            <p style="margin: 0">云平台的对接操作请在<a href="/cloudenv_manage/#/cloud_config">云管理-云资源池</a>中进行</p>
          </template>
        </el-alert>
      </div>
      <div class="framework-content">
        <!-- 表格 -->
        <div v-if="thisPermission.create" class="framework-content-button" style="margin-bottom: 30px">
          <!-- 按钮组 -->
          <el-button v-if="thisPermission.create" type="primary" @click="openModalCreateOrEdit('add')">
            <el-icon><Plus /></el-icon>
            <span style="margin-left: 4px">新增平台</span>
          </el-button>
        </div>
        <!-- 卡片组 -->
        <div class="framework-content-card">
          <div class="card-box" v-for="(item, index) in cardList" :key="index">
            <div v-loading="item.status ? item.status.key === 'SYNCING' : false" :element-loading-text="item.status.verbose">
              <div v-if="item.status ? item.status.key === 'SYNCING' : false" class="dim-back">
                <img src="@/assets/images/img/loading.png" class="dim" alt="" />
              </div>
              <img v-else-if="item.status ? item.status.key === 'ERROR' : false" src="@/assets/images/img/error.png" alt="" />
              <img v-else-if="item.status ? item.status.key === 'RUNNING' : false" src="@/assets/images/img/success.png" alt="" />
              <div class="card-title">{{ item.type.verbose }}</div>
              <div class="third-party-card-name">{{ item.name }}</div>
              <div class="card-log">
                <el-tag
                  v-if="item.route"
                  :color="item.route.color"
                  style="position: relative; top: -26px; width: 80px; text-align: center; border-radius: 6px"
                >
                  {{ item.route.name }}
                </el-tag>
                <BACKUPSvg
                  class="logo"
                  v-if="item.type.key === 'cloudBackup'"
                  :color="color"
                  style="width: 80px; height: 80px"
                  :background-color="item.status.key === 'SYNCING' ? 'rgb(200,200,200)' : '#ffff'"
                ></BACKUPSvg>
                <CLOUDDESKTOPSvg
                  class="logo"
                  v-if="item.type.key === 'cloudDesktop' || item.type.key === 'cloudDesktopH3c'"
                  :color="color"
                  :background-color="item.status.key === 'SYNCING' ? 'rgb(200,200,200)' : '#ffff'"
                ></CLOUDDESKTOPSvg>
                <DESvg
                  class="logo"
                  v-if="item.type.key === 'dynamicEnvironment' || item.type.key === 'dynamicEnvironmentWeitu'"
                  :color="color"
                  :background-color="item.status.key === 'SYNCING' ? 'rgb(200,200,200)' : '#ffff'"
                ></DESvg>
                <NETMANAGEMENTSvg
                  class="logo"
                  v-if="item.type.key === 'net' || item.type.key === 'netYunzhihui'"
                  :color="color"
                  :background-color="item.status.key === 'SYNCING' ? 'rgb(200,200,200)' : '#ffff'"
                ></NETMANAGEMENTSvg>
                <OPERATIONSvg
                  class="logo"
                  v-if="item.type.key === 'cloudOM' || item.type.key === 'ucenterH3c'"
                  :color="color"
                  :background-color="item.status.key === 'SYNCING' ? 'rgb(200,200,200)' : '#ffff'"
                ></OPERATIONSvg>
                <SECURITYSvg
                  class="logo"
                  v-if="
                    item.type.key === 'cloudSecurity' ||
                    item.type.key === 'cloudSecurityQiming' ||
                    item.type.key === 'cloudSecurityPoolSangfor' ||
                    item.type.key === 'BastionHostSangfor'
                  "
                  :color="color"
                  :background-color="item.status.key === 'SYNCING' ? 'rgb(200,200,200)' : '#ffff'"
                ></SECURITYSvg>
              </div>
              <div v-if="item.status ? item.status.key === 'ERROR' : false" class="card-status">
                <span>状态：{{ item.status.verbose }}</span>
                <el-tooltip>
                  <template #title>
                    {{ item.message }}
                  </template>
                  <i class="ri-question-line" style="margin-left: 2px; font-size: 16px"></i>
                </el-tooltip>
              </div>
              <div v-else-if="item.status ? item.status.key === 'RUNNING' : false" class="card-status">
                <span>状态：{{ item.status.verbose }}</span>
              </div>
              <div class="card-span1">厂商：{{ item.producer }}</div>
              <div class="card-span2">版本号：{{ item.version_number }}</div>
            </div>
            <div v-if="thisPermission.update || thisPermission.delete || thisPermission.detail">
              <div class="card-button" v-if="item.status.key !== 'SYNCING'">
                <el-button
                  link
                  icon="EditPen"
                  type="primary"
                  v-if="thisPermission.update"
                  @click="openModalCreateOrEdit('editor', item)"
                  class="third-party-ant-btn"
                >
                  编辑
                </el-button>
                <div v-if="thisPermission.update && (thisPermission.delete || thisPermission.detail)" class="separate"></div>
                <DeleteButton
                  link
                  icon="Delete"
                  v-if="thisPermission.delete"
                  type="primary"
                  :data="item"
                  @submit-handle="getCardData"
                >
                  删除
                </DeleteButton>
                <div v-if="thisPermission.delete && thisPermission.detail" class="separate"></div>
                <el-button
                  link
                  icon="View"
                  type="primary"
                  v-if="thisPermission.detail"
                  @click="openModalDetail(item)"
                  class="third-party-ant-btn"
                >
                  详情
                </el-button>
              </div>
              <div class="card-button" v-else style="justify-content: center; overflow: hidden; color: #818383">
                {{ item.message }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <ModalDetail ref="detailRef" :data="lineItem"></ModalDetail>
    <ModalCreateOrEdit :is-edit="isEdit" ref="createOrEditRef" :edit-item="selectItem" @submit="getCardData"></ModalCreateOrEdit>
  </div>
</template>

<script setup lang="ts" name="thirdPartyManagement">
import { ref, computed } from "vue";
import { useRoute } from "vue-router";
import { useAuthStore } from "@/stores/modules/auth";
import { getCardList } from "@/api/modules/businessManagement/thirdPartyManagement";
import { ElMessage } from "element-plus";
import { DEFAULT_PRIMARY } from "@/config";
// 系统图标
import BACKUPSvg from "./icon/BACKUPSvg.vue";
import CLOUDDESKTOPSvg from "./icon/CLOUD_DESKTOPSvg.vue"; // CLOUD_DESKTOPSvg
import DESvg from "./icon/DESvg.vue";
import NETMANAGEMENTSvg from "./icon/NET_MANAGEMENTSvg.vue"; // NET_MANAGEMENTSvg
import OPERATIONSvg from "./icon/OPERATIONSvg.vue";
import SECURITYSvg from "./icon/SECURITYSvg.vue";
import DeleteButton from "./modal/DeleteButton.vue";
import ModalDetail from "./modal/modal_detail.vue";
import ModalCreateOrEdit from "./modal/modal_create_or_edit.vue";
// import modalAssociatedUsers from "@/views/sysManagement/role_management/component/modal_associated_users.vue";
const route = useRoute();
const authStore = useAuthStore();
const thisPermission = computed(() => authStore.permissionListGet[route.name as string] || {});
const color = DEFAULT_PRIMARY;
const lineItem = ref<any>({});
const isEdit = ref<boolean>();
const selectItem = ref<any>({});
// 查看详情
const detailRef = ref<any>(null);
// 创建，编辑弹框
const createOrEditRef = ref<any>(null);
const openModalCreateOrEdit = (type, data?: any) => {
  switch (type) {
    case "add":
      isEdit.value = false;
      createOrEditRef.value?.openDialog();
      break;
    case "editor":
      isEdit.value = true;
      selectItem.value = data;
      createOrEditRef.value?.openDialog();
      break;
  }
};
// 详情弹框
const openModalDetail = (item: { id: "" }) => {
  lineItem.value = item;
  detailRef.value?.openDialog();
};
const cardList = ref<any>([]);
const cardListLoading = ref<boolean>(false);
const getCardData = async () => {
  cardListLoading.value = true;
  try {
    const { data } = await getCardList();
    // const data = [
    //   {
    //     id: 1,
    //     type: {
    //       key: "cloudOM",
    //       verbose: "云运维"
    //     },
    //     status: {
    //       key: "RUNNING",
    //       verbose: "正常"
    //     },
    //     producer: "华为",
    //     hw_proxy_info: {
    //       http: "socks5://10.167.48.58:1080",
    //       https: "socks5://10.167.48.58:1080"
    //     },
    //     route: null,
    //     appid: "2b58d124e58748eea6b8aed4e1273088",
    //     sso_path: "https://oc-openlab.hcs80.com:31943",
    //     ar_sso: null,
    //     updated_username: "admin",
    //     login_address: null,
    //     create_at: "2024-09-05 16:46:28",
    //     update_at: "2024-10-23 11:01:53",
    //     name: "华为云运维",
    //     username: "chengguiyun_interface",
    //     password: "UnNocW9kZUAxMjM0NQ==",
    //     protocol: "https",
    //     version_number: "8.2.0",
    //     host: "oc.sa-fb-1.xahcs8.com",
    //     port: "443",
    //     sxf_platform_name: null,
    //     apikey: "",
    //     ar_sso_path: null,
    //     message: null,
    //     lisense_end_time: null,
    //     updated_by: 1
    //   }
    // ];
    cardList.value = data;
    cardListLoading.value = false;
  } catch (error) {
    console.error(error);
    ElMessage.error("列表数据获取失败");
    cardListLoading.value = false;
  }
};
getCardData();
</script>

<style lang="scss" scoped>
@import "index";
</style>
